import React, { useEffect, useState } from 'react';
import { Table, DatePicker, Select, Pagination } from 'antd';
const { RangePicker } = DatePicker;
import { Resizable } from 'react-resizable';
// import './index.css';
// import { ifyPost } from '../../../Api/api';
// import './index.less';
import { Input, Space, Button, Card } from 'antd';
import axios from 'axios';

// 调整table表头
const ResizeableTitle = (props) => {
  const { onResize, width, ...restProps } = props;

  if (!width) {
    return <th {...restProps} />;
  }

  return (
    <Resizable
      width={width}
      height={0}
      onResize={onResize}
      draggableOpts={{ enableUserSelectHack: false }}
    >
      <th {...restProps} />
    </Resizable>
  );
};

// 拖拽调整table
const index = () => {
  // table 数据
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

  const getList = async (page, pageSize) => {
    console.log(page, pageSize);

    if (select1 === '全部') {
      if (input1 || input2 || input3) {
        const { data } = await axios.get(
          `http://localhost:3000/report?_page=${page}&_limit=${pageSize}&flowName_like=${input1}&initiator_like=${input2}&backlog_like=${input3}`,
        );
        setdata(data);
        console.log(data);
      } else {
        const { data } = await axios.get(
          `http://localhost:3000/report?_page=${page}&_limit=${pageSize}`,
        );
        setdata(data);

        console.log(data);
      }
    } else {
      const { data } = await axios.get(
        `http://localhost:3000/report?_page=${page}&_limit=${pageSize}&flowName_like=${input1}&initiator_like=${input2}&backlog_like=${input3}&state=${select1}`,
      );
      setdata(data);
      console.log(data);
    }

    const { data } = await axios.get(`http://localhost:3000/report`);
    settotal(data.length);

    // console.log(data.ifyCon);
    // setIfyList(data.ifyCon)
    // this.setState({ifyList:data.ifyCon})
  };
  const onSelectChange = (newSelectedRowKeys, record) => {
    console.log(newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const [cols, setCols] = useState([
    {
      title: '流程编号',
      dataIndex: 'flowNumber',
      key: 'flowNumber',
      ellipsis: true,
      align: 'center',
      width: 180,
    },

    {
      title: '流程名称',
      dataIndex: 'flowName',
      key: 'flowName',
      ellipsis: true,
      align: 'center',

      width: 180,
    },
    {
      title: '发起部门',
      dataIndex: 'department',
      align: 'center',
      ellipsis: true,

      key: 'department',
      width: 180,
    },
    {
      title: '发起人',
      dataIndex: 'initiator',
      align: 'center',
      key: 'initiator',
      ellipsis: true,
      width: 180,
    },

    {
      title: '发起日期',
      dataIndex: 'time',
      key: 'time',
      ellipsis: true,
      align: 'center',
      width: 180,
    },
    {
      title: '待办人员',
      dataIndex: 'backlog',
      key: 'backlog',
      ellipsis: true,
      align: 'center',
      width: 180,
    },
    {
      title: '状态',
      dataIndex: 'state',
      key: 'state',
      ellipsis: true,
      align: 'center',
      width: 180,
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      width: 180,
      render: (text, record, _, action) => [<a key="editable">编辑</a>],
    },
  ]);
  const [columns, setColumns] = useState([
    {
      title: '流程编号',
      dataIndex: 'flowNumber',
      key: 'flowNumber',
      ellipsis: true,
      align: 'center',
      width: 180,
    },

    {
      title: '流程名称',
      dataIndex: 'flowName',
      key: 'flowName',
      ellipsis: true,
      align: 'center',

      width: 180,
    },
    {
      title: '发起部门',
      dataIndex: 'department',
      align: 'center',
      ellipsis: true,

      key: 'department',
      width: 180,
    },
    {
      title: '发起人',
      dataIndex: 'initiator',
      align: 'center',
      key: 'initiator',
      ellipsis: true,
      width: 180,
    },

    {
      title: '发起日期',
      dataIndex: 'time',
      key: 'time',
      ellipsis: true,
      align: 'center',
      width: 180,
    },
    {
      title: '待办人员',
      dataIndex: 'backlog',
      key: 'backlog',
      ellipsis: true,
      align: 'center',
      width: 180,
    },
    {
      title: '状态',
      dataIndex: 'state',
      key: 'state',
      ellipsis: true,
      align: 'center',
      width: 180,
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      render: (text, record, _, action) => [
        <a key="editable">过程</a>,
        <a key="editable">催办</a>,
      ],
    },
  ]);
  const [dataSource, setdata] = useState();

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  // 定义头部组件
  const components = {
    header: {
      cell: ResizeableTitle,
    },
  };

  // 处理拖拽
  const handleResize =
    (index) =>
    (e, { size }) => {
      const nextColumns = [...cols];
      // 拖拽是调整宽度
      nextColumns[index] = {
        ...nextColumns[index],
        width: size.width,
      };

      setCols(nextColumns);
    };

  useEffect(() => {
    setColumns(
      (cols || []).map((col, index) => ({
        ...col,
        onHeaderCell: (column) => ({
          width: column.width,
          onResize: handleResize(index),
        }),
      })),
    );
    getList();
  }, [cols]);

  const [input1, setinpu1] = useState('');
  const [input2, setinpu2] = useState('');
  const [input3, setinpu3] = useState('');
  const [select1, setSelect1] = useState('全部');

  const [page, setpage] = useState(1);
  const [pageSize, setpageSize] = useState(3);
  const [total, settotal] = useState(10);

  const onInpout1 = (e) => {
    console.log(e.target.value);
    setinpu1(e.target.value);
  };
  const onInpout2 = (e) => {
    console.log(e.target.value);
    setinpu2(e.target.value);
  };
  const onInpout3 = (e) => {
    console.log(e.target.value);
    setinpu3(e.target.value);
  };
  const handleChange = (value) => {
    console.log(value);
    setSelect1(value);
  };
  const pageOnchange = (page, pageSize) => {
    getList(page, pageSize);
  };

  const Search = () => {
    // console.log(456)
    getList(page, pageSize);
  };

  return (
    <div className="report">
      <Card>
        <div className="input">
          <span style={{ marginLeft: '15px' }}>流程名称</span>
          <Input
            style={{ width: '9%', marginLeft: '10px' }}
            value={input1}
            onChange={(e) => onInpout1(e)}
          ></Input>
          <span style={{ marginLeft: '15px' }}>发起时间</span>
          <RangePicker showTime style={{ width: '20%', marginLeft: '15px' }} />
          <span style={{ marginLeft: '15px' }}>发起人</span>
          <Input
            style={{ width: '9%', marginLeft: '10px' }}
            value={input2}
            onChange={(e) => onInpout2(e)}
          ></Input>
          <span style={{ marginLeft: '15px' }}>代办人</span>
          <Input
            style={{ width: '9%', marginLeft: '10px' }}
            value={input3}
            onChange={(e) => onInpout3(e)}
          ></Input>
          <span style={{ marginLeft: '15px' }}>状态</span>
          <Select
            //  labelInValue="789"
            value={select1}
            style={{
              width: 120,
              left: 10,
            }}
            onChange={handleChange}
            options={[
              {
                value: '全部',
                label: '全部',
              },
              {
                value: '审批中',
                label: '审批中',
              },

              {
                value: '审批完成',
                label: '审批完成',
              },
              {
                value: '退回',
                label: '退回',
              },
              {
                value: '委托',
                label: '委托',
              },

              {
                value: '作废',
                label: '作废',
              },
            ]}
          />
          <Button style={{ marginLeft: '20px' }} onClick={Search}>
            查询
          </Button>
        </div>

        <Table
          size="small"
          style={{ marginTop: '30px' }}
          rowSelection={rowSelection}
          bordered
          components={components}
          columns={columns}
          dataSource={dataSource}
          scroll={{
            x: 1000,
          }}
          pagination={false}
          rowKey={(columns) => columns.key}
          rowClassName={(record, index) => {
            let className = '';
            className = index % 2 === 0 ? 'ou' : 'ji';
            // console.log(className)
            return className;
          }}
        />
        <Pagination
          defaultCurrent={1} // 默认在第一个页面
          defaultPageSize={3} // 默认一个页面显示3个数据
          // 点击页面触发更新，点击时，默认传入页面值，例如第一页，值为1
          onChange={pageOnchange}
          // 设置整个数据的总数量
          showSizeChanger
          pageSizeOptions={[1, 2, 3, 5]}
          total={total}
        />
      </Card>
    </div>
  );
};

export default index;
